<template>
  <div>
    <a-drawer :visible="show" title="编辑信息" width="484px" @close="onCancel">
      <div class="baseInfo-title">基本信息</div>
      <a-form :label-col="{ span: 7 }" :wrapper-col="{ span: 13 }">
        <a-form-item label="姓名">
          <a-input v-model="option.name" />
        </a-form-item>
        <a-form-item label="身份证号">
          <a-input v-model="option.idCard" />
        </a-form-item>
        <a-form-item label="个人社保账号">
          <a-input v-model="option.o" disabled />
        </a-form-item>
        <a-form-item label="个人公积金账号">
          <a-input v-model="option.i" disabled />
        </a-form-item>
      </a-form>
      <div class="baseInfo-title">参保信息</div>
      <a-form :label-col="{ span: 7 }" :wrapper-col="{ span: 13 }">
        <a-form-item label="社保起缴时间">
          <a-date-picker v-model="commonDate" style="width:100%" />
        </a-form-item>
        <a-form-item label="公积金起缴时间">
          <a-date-picker v-model="commonDate" style="width:100%" />
        </a-form-item>
        <a-form-item label="指派公司">
          <a-select v-model="option.assignCompanyId" allow-clear @change="handleSelect">
            <a-select-option v-for="item in subCompany" :key="item.id" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="参保方案">
          <a-select v-model="option.socProgName" @change="handleChange">
            <a-select-option v-for="item in progList" :key="item.id" :value="item.progName">{{ item.progName }}</a-select-option>
          </a-select>
          <a-col class="primary" @click="editItem(formList)"> 编辑各项基数</a-col>
        </a-form-item>

        <a-form-item v-for="item in formList" :key="item.id" :label="item.itemName">
          <a-input-number
            v-model="item.cardinalityDefault"
            :disabled="disabled"
            style="width:100%"
            :min="item.cardinalityMin || 0"
            :max="item.cardinalityMax || 0"
          />
          <a-row type="flex">
            <a-col>基数范围[{{ `${item.cardinalityMin || 0}-${item.cardinalityMax || 0}` }}]</a-col>
          </a-row>
        </a-form-item>
      </a-form>
      <div class="drawer-footer-box">
        <a-button :style="{ marginRight: '12px' }" @click="onCancel"> 取消</a-button>
        <a-button type="primary" @click="onOk">确认</a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "EditorModal",
  props: ["show", "options"],
  data() {
    return {
      commonDate: null,
      copyData: {},
      //  params: {},
      progList: [],
      formList: {},
      publicMoney: {},
      disabled: true,
      subCompany: [],
      option: {},
      copyFormList: []
    };
  },
  computed: {
    ...mapState(["hr"])
  },
  watch: {
    show(val) {
      if (val) {
        if (this.options) {
          this.option = JSON.parse(JSON.stringify(this.options));
          if (this.option.socProgId) {
            this.getSubCompanys(this.option.socProgId);
          }
          this.option.assignCompanyId = this.options.assignCompanyId;
          this.commonDate = this.moment(this.option.socStartDate);
          //  this.params.progName = this.options.socProgName || "";
          this.copyData = JSON.parse(JSON.stringify(this.option));
          if (this.option.socDispatchEmpItemList) {
            this.formList = this.option.socDispatchEmpItemList.map(item => {
              item.cardinalityDefault = item.cardinalityPerson;
              return item;
            });
            this.copyFormList = this.formList;
            this.publicMoney = this.formList.find(item => item.itemName.includes("公积金"));
          }
        }
      }
    }
  },
  created() {
    this.getList();
  },
  methods: {
    // 清空指派公司
    handleSelect(value) {
      this.option.assignCompanyId = value;
      this.option.assignCompanyName = this.subCompany.find(i => i.id === value).name;
    },
    // 获取初始子公司
    getSubCompanys(id) {
      this.$request({
        url: `/hr/api/v1/socDispatches/listChildCompanyBySoc/${id}/${this.hr.companyId}`
      }).then(({ data }) => (this.subCompany = data || []));
    },
    // 获取子公司
    getSubCompany(id) {
      this.$request({
        url: `/hr/api/v1/socDispatches/listChildCompanyBySoc/${id}/${this.hr.companyId}`
      }).then(({ data }) => {
        this.subCompany = data || [];
        if (data && data.length) {
          this.option.assignCompanyId = data[0].id;
          this.option.assignCompanyName = data[0].name;
        } else {
          this.option.assignCompanyId = "";
        }
      });
    },
    // 编辑每一个
    editItem(item) {
      this.disabled = !this.disabled;
    },
    // 获取参保方案
    getList() {
      this.$request({ url: `/hr/api/v1/socProgs/listAllRelation` }).then(({ data }) => {
        this.progList = data;
      });
    },
    // 选择方案
    handleChange(value, option) {
      this.option.socProgId = option.data.key;
      let formList = this.progList.find(item => item.progName === value).socProgItemVOList;
      formList = formList.map(item => {
        this.copyFormList.map(f => {
          if (f.itemName === item.itemName) {
            item.cardinalityDefault = f.cardinalityPerson;
          }
        });
        return item;
      });
      this.formList = formList;

      this.option.socDispatchEmpItemList = this.progList.find(item => item.progName === value).socProgItemVOList;
      this.getSubCompany(option.key);
    },
    // 确定
    onOk() {
      this.option.fundStartDate = this.option.socStartDate = new Date(this.commonDate.format()).getTime();
      this.disabled = true;
      this.$emit("change", { options: this.option, onOk: true });
    },
    // 取消
    onCancel() {
      this.disabled = true;
      this.$emit("change", { options: this.copyData, onOk: false });
    }
  }
};
</script>

<style>
.baseInfo-title {
  padding: 14px 24px;
  background: rgba(250, 250, 250, 1);
  border-radius: 4px;
  height: 48px;
  margin-bottom: 24px;
}
</style>
